<template>
	<view class="container">
		<phone-header class="bg-shadow"
			:isrightHide=true
			title="客户评价"
			titleColor="#fff"
			bgColor="#4CCCD5"
			titleFontWeight="none"
			@tapRight="tapRight"
			@tapLeft="tapLeft"
		></phone-header>
		<view class="content">
			<block v-for="(item, index) in evalArr" :key="index">
				<view class="item-box bg-fff bg-shadow">
					<view class="item">
						<view class="item-portrait">
							<view class="portrait"></view>
						</view>
						<view class="item-content">
							<view class="name-and-time">
								<view class="name">
									<text>{{item.username}}</text>
								</view>
								<view class="time">
									<text>{{item.time}}</text>
								</view>
							</view>
							<view :class="['evaluate-content', {'content-hidd': item.contShow}]" @tap="showFun(item)">
								<text>{{item.content}}</text>
							</view>
							<view class="phone-name">
								<text>{{item.phone}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="load-ani">
			<text>加载数据</text>
		</view>
	</view>
</template>

<script>
	import phoneHeader from '../../components/phone-header/phone-header.vue'
	
	export default {
		data() {
			return {
				activedNode:null,
				evalArr: [
					{
						contShow: true,
						portrait: '/static/user.png',
						username: 'xiaochen',
						time: '2019-03-04',
						content: '师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活，必须好评,师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活，必须好评',
						phone: 'oppo R7'
					},
					{
						contShow: true,
						portrait: '/static/user.png',
						username: 'chenguanquan',
						time: '2019-03-03',
						content: '师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活',
						phone: '魅族16 plus'
					},
					{
						contShow: true,
						portrait: '/static/user.png',
						username: 'xiaochen',
						time: '2019-03-04',
						content: '师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活，必须好评,师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活，必须好评',
						phone: 'oppo R7'
					}
				]
			}
		},
		onReachBottom() {
			console.log("上拉触底")
		},
		onPullDownRefresh() {
			console.log("下拉刷新")
			this.stopLoad()
		},
		methods: {
			stopLoad() {
				setTimeout((res) => {
					uni.stopPullDownRefresh()
				}, 1000)
			},
			showFun(e) {
				e.contShow = !e.contShow
			},
			tapRight() {
				
			},
			tapLeft() {
				
			}
		},
		components: {
			phoneHeader
		}
	}
</script>

<style lang="scss">
	.content {
		.item {
			display: flex;
			padding: 30upx 40upx;
			margin-bottom: 8upx;
			.item-portrait {
				width: 64upx;
				margin-right: 20upx;
				.portrait {
					width: 100%;
					height: 64upx;
					background: url('/static/user.png') no-repeat;
					background-size: 100%;
				}
			}
			.item-content {
				flex: 1;
				.name-and-time {
					display: flex;
					justify-content: space-between;
					.name {
						font-size: 28upx;
					}
					.time {
						opacity: .5;
						font-size: 20upx;
					}
				}
				.evaluate-content {
					color: #707070;
					margin: 28upx 0;
					font-size: 24upx;
				}
				.content-hidd {
					overflow: hidden;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					text-overflow: -o-ellipsis-lastline;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				.phone-name {
					color: #232323;
					font-size: 24upx;
					font-weight: 400;
				}
			}
		}
	}
	.load-ani {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}
</style>